<template>
  <div class="teacher-new-book-entry">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>教师教材新书入库</span>
      </div>
      <el-form ref="bookForm" :model="bookForm" label-width="120px" size="medium" :rules="rules">
        <el-form-item label="ISBN" prop="isbn" required>
          <el-input v-model="bookForm.isbn"></el-input>
        </el-form-item>
        <el-form-item label="教材名称" prop="name" required>
          <el-input v-model="bookForm.name"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author" required>
          <el-input v-model="bookForm.author"></el-input>
        </el-form-item>
        <el-form-item label="出版社" prop="publisher" required>
          <el-input v-model="bookForm.publisher"></el-input>
        </el-form-item>
        <el-form-item label="版本" prop="edition" required>
          <el-input v-model="bookForm.edition"></el-input>
        </el-form-item>
        <el-form-item label="入库数量" prop="quantity" required>
          <el-input-number v-model="bookForm.quantity" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitBookEntry">入库</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts">
import {postTeacherNewInventory} from "@/service/teacher/teacher.service.js";
export default {
  data() {
    return {
      bookForm: {
        isbn: '',
        name: '',
        author: '',
        publisher: '',
        edition: '',
        quantity: 1
      },
      rules: {
        isbn: [
          { required: true, message: 'ISBN 不能为空', trigger: 'blur' },
          { min: 10, max: 13, message: 'ISBN 长度必须在 10 到 13 个字符之间', trigger: 'blur' }
        ],
        // 为其他字段添加验证规则
      }
    };
  },
  methods: {
    submitBookEntry() {
      postTeacherNewInventory(this.bookForm,() =>
      { //在这里添加提交表单的逻辑
        if(this.bookForm){
          console.log('Book entry form submitted:', this.bookForm);
          // 可以在这里调用API发送数据到后端
          console.error('教材新书入库成功！');
        }
        else {
          console.error('Error in form submission!');
          return false;
        }
      })
    }
  }
};
</script>

<style scoped>
.teacher-new-book-entry {
  margin: 30px;
}
.box-card {
  width: 600px;
}
</style>